import React, { useEffect, useState } from 'react';
import { Button, Table, Input, Modal, notification, Space } from 'antd'
import { useNavigate, NavLink } from 'react-router-dom';
import TimeList from "../../../component/CXY/TimeList"
import "../../../view/Index/CXY/styles/systemconsut.scss"
import * as service from "../../../api/System"
import { P } from '@antv/g2plot';
import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons';
import ExportJsonExcel from "js-export-excel"
interface Props {

}
const { Search } = Input;
function SystemConsut(props: Props) {
    var navigate = useNavigate()
    const [data, setData] = useState([])
    var [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 50 });
    useEffect(() => {
        getConsultlist()
    }, [])
    var getConsultlist = () => {
        service.consut_list().then(res => {
            console.log(res)
            setData(res.data.data)
            setPagination({
                ...pagination,
                total: res.data.data.length
            })
        })
    }
    const myDelete = (row: any) => {
        Modal.confirm({
            icon: <CloseCircleOutlined style={{ color: "red" }} />,
            title: '删除标签',
            okText: '确认',
            cancelText: '取消',
            content: '确认要删除吗？',
            onOk() {
                service.consut_delete({ newsId: row.newsId }).then((res) => {
                    console.log(res)
                    getConsultlist()
                    notification.success({
                        placement: "top",
                        message: "删除成功！"
                    })
                })
            },
        });
    }
    let excel = () => {//导出Excel表
        let sheetFilter = ["newsId", "newsPicture", 'newsName', 'newsType', 'journalName', "newsState", "newsCollection", "newsTime"]//需要导出的属性，一般列表数据的属性
        let option = { fileName: "", datas: [{}] };
        option.fileName = "咨询管理";
        option.datas = [
            {
                sheetData: data,//需要导出的数据
                sheetName: "资讯管理",
                sheetFilter: sheetFilter,
                sheetHeader: ["编号", "列表图", "文章标题", "文章分类", "发布人", "发布状态", "收藏量", "操作时间"],//每一列的列头
                columnWidth: [20, 20, 20, 20, 20, 20, 20, 20],//每一列的宽
            }
        ]
        let toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel();

    }
    const columns = [
        {
            title: '序号',
            render: (_: any, record: never) => <a>{data.indexOf(record) + 1}</a>,//动态渲染标签/组件

        },
        {
            title: '列表图',
            dataIndex: 'newsPicture',
            key: 'newsPicture',
            render: (newsPicture: any) => {
                return (
                    <>
                        <img src={newsPicture} alt="" />
                    </>
                )
            }
        },
        {
            title: '文章标题',
            dataIndex: 'newsName',
            key: 'newsName',
        },
        {
            title: '文章分类',
            dataIndex: 'newsType',
            key: 'newsType',
        },
        {
            title: '发布人',
            dataIndex: 'journalName',
            key: 'journalName',
        },
        {
            title: '发布状态',
            key: 'newsState',
            render: (_: any, record: any) => {
                return (
                    <>
                        {
                            record.newsState == true ?
                                <p>已发布</p> : <p>未发布</p>
                        }
                    </>
                )
            }
        },
        {
            title: '收藏量',
            dataIndex: 'newsCollection',
            key: 'newsCollection',
        },
        {
            title: '操作时间',
            dataIndex: 'newsTime',
            key: 'newsTime',
        },
        {
            title: '操作',
            render: (_: any, row: any) => {
                return (
                    <>
                        <NavLink style={{ marginRight: 10, color: 'blue' }} to="/index/system-editconsult" state={{ row, type: "edit" }}>编辑</NavLink>
                        <span style={{ color: 'red', cursor: "pointer" }} onClick={() => { myDelete(row) }}>删除</span>
                    </>
                )
            }
        },
    ];

    // 分页
    const handleChange = (pagi: any) => {
        setPagination(pagi);//更新页码
    }
    const onSearch = (value: string) => {
        console.log(value);
        service.consut_search({ newsName: value }).then((res) => {
            console.log(res);
            setData(res.data.data)
        })
    };

    return (
        <div className='system-consut'>
            <h4>咨询管理</h4>
            <div className='consut-header'>

                {/* <TimeList></TimeList> */}
                <Search size="large" placeholder="请输入关键词" allowClear onSearch={onSearch} style={{ width: 400 }} />
                <Space>
                    <Button size="large" type="primary">
                        <NavLink to="/index/system-editconsult" state={{ type: "add" }}>发布文章</NavLink>
                    </Button>
                    <Button size="large" type="primary" onClick={excel}>
                        导出
                    </Button>
                </Space>
            </div>
            <Table
                columns={columns}
                dataSource={data}
                rowKey={(row: any) => row.newsId}
                pagination={pagination}
                onChange={(pagi) => { handleChange(pagi) }}
            />
        </div>
    );
}

export default SystemConsut;